<div id="orderview">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" >调货单查看</h4>
</div>
    <div class="modal-body">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="col-md-2">
                            <small class="gray">发货仓</small><br>
                            {{topdata.source_name}}<br>
                        </div>
                        <div class="col-md-2">
                            <small class="gray">发货人</small><br>
                            {{topdata.store_ordername}}<br>
                            <small>{{topdata.store_orderdate}}</small>
                        </div>
                        <div class="col-md-2">
                            <small class="gray">收货仓</small><br>
                            {{topdata.warehouse_name}}<br>
                        </div>
                        <div class="col-md-2">
                            <small class="gray">取货人</small><br>
                            {{topdata.take_name}}
                        </div>
                        <div class="col-md-2">
                            <small class="gray">打印</small><br>
                            {{topdata.print_name}}<br><small>{{topdata.print_date}}</small>
                        </div>
                        <div class="col-md-2">
                            <small class="gray">收货确认</small><br>
                            {{topdata.receive_name}}<br><small>{{topdata.receive_date}}</small>
                        </div>
                    </div>

                    <table class="table table-striped ntTable">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>产品</th>
                            <th>箱规</th>
                            <th>数量</th>
                            <th>库存</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr  v-for="(item,index) in prodata">
                            <td align="center">{{index+1}}</td>
                            <td>
                                <div class="pro">
                                    <div class="pro-icon"><img :src="item.prodata.img_url" border="0" width="48px" height="48px" alt=""></div>
                                    <div class="pro-name">
                                        <small> {{formatUnit(item.prodata.prochar_id,'ID') + (item.prodata.brand_name ? ' / '+item.prodata.brand_name :'')+ (item.prodata.model ? ' / '+item.prodata.model :'')}}
                                        </small>
                                        <br>
                                        {{item.prodata.pro_name}}
                                    </div>
                                </div>
                            </td>
                            <td align="right">
                                {{item.prodata.prochar_qty}}<small class="unit">PCS/CTN</small><br>
                                {{item.prodata.ctn_size}}<small class="unit">CM</small>
                            </td>
                            <td align="right">
                                {{item.qty}}<small class="unit">PCS</small><br>
                                {{formatUnit(item.qty/item.prodata.prochar_qty,'CTN')}}<small class="unit">CTN</small>
                            </td>
                            <td align="right">
                                {{item.storeqty}}<small class="unit">PCS</small><br>
                                {{formatUnit(item.storeqty/item.prodata.prochar_qty,'CTN')}}<small class="unit">CTN</small>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
            <span class="glyphicon glyphicon-remove"></span>取消
        </button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">
            <span class="fa fa-save"></span> 保存
        </button>
    </div>
    <input type="hidden" id="id" value="{$id}">
    <input type="hidden" id="warehouse_id" value="{$warehouse_id}">
</div>
<script>
    var table = new Vue({
        el: '#orderview',
        data: {
            topdata:{},//查看的数据
            prodata:[],//查看的产品数据
        },
        methods: {
            formatUnit: formatUnit,
            getAllList(){
                $.ajax({
                    url: "/admin/warehouses/transdetail",
                    type: 'post',
                    data: {
                        id:$('#id').val(),
                        warehouse_id:$('#warehouse_id').val()
                    },
                    dataType: "json",
                    success: (res) => {
                        this.topdata=res.topdata;
                        this.prodata=res.prodata;
                    }
                })
            }
        },
        mounted(){
            this.getAllList();
        }
    })
</script>
